<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>The HTML Presentation Framework</title>
  <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
  <meta name="author" content="Hakim El Hattab">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      background: #0A0F23;
    }

    * {
      margin: 0;
      padding: 0;
    }

  </style>
</head>

<body>
  <div id="main" style="width: 100%;height:100%;"></div>
  <script src="../../components/echarts-4.0.4.min.js"></script>
  <script>
    var pieChart = echarts.init(document.getElementById('main'));
    var data = [{value:159, name:'轻工/纺织'},
                {value:457, name:'石油/石化'},
                {value:316, name:'地质/矿产'},
                {value:513, name:'钢铁/有色金属'},
                {value:34, name:'橡胶/塑料'},
                {value:157, name:'机械制造'},
                {value:791, name:'地质勘探'},
                {value:185, name:'农/林/牧'},
                {value:167, name:'食品/烟草'},
                {value:219, name:'矿业/冶金'},
                {value:418, name:'化工/化纤'},
                {value:9, name:'非金属/珠宝'},
                {value:112, name:'通信/邮政'},
                {value:318, name:'医疗/卫生'},
                {value:212, name:'电子/信息技术'}
    ];
    var pieOption = {
      title: {
        text: '仪器设备服务领域分类',
        left: 'center',
        top: "5%",
        textStyle: {
          color: '#fff',
          fontSize: 22
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)"
      },
        color: ['#0179c4','#0097db','#00a3ac','#029f85','#009f5c','#81bd41','#f44a4a','#ed5f05', '#f29806', '#fdc901','#fdf100','#c0d528'],
      legend: { //图例组件，颜色和名字
          left: '10%',
          top: '15%',
          orient: 'vertical',
          itemGap: 12, //图例每项之间的间隔
          itemWidth: 10,
          itemHeight: 10,
          icon: 'rect',
          data: ['轻工/纺织','石油/石化','地质/矿产','钢铁/有色金属','水文气象','橡胶/塑料','机械制造','地质勘探','农/林/牧','食品/烟草','矿业/冶金','化工/化纤','非金属/珠宝','通信/邮政','医疗/卫生','电子/信息技术'],
          textStyle: {
              color: '#fff',
              fontSize: 16
          }
      },
        grid: {
            top: '10%',
            left: '10%',
            bottom: '5%',
            right: '10%',
            containLabel: true
        },
      series: [{
        type: 'pie',
        clockwise: false, //饼图的扇区是否是顺时针排布
        minAngle: 15, //最小的扇区角度（0 ~ 360）
        radius: ['20%', '60%'],
        center: ['70%', '55%'], //饼图的中心（圆心）坐标
        avoidLabelOverlap: true, ////是否启用防止标签重叠
        itemStyle: { //图形样式
          normal: {
            borderColor: '#fff',
            borderWidth: 1
          }
        },
        label: { //标签的位置
          normal: {
            show: true,
            position: 'inside', //标签的位置
            formatter: "{d}%",
            textStyle: {
              color: '#fff'
            }
          }
        },
        emphasis: {
          show: true,
          textStyle: {
            fontWeight: 'bold'
          }
        },
        data: data
      }]
    };

    var currentIndex = -1;
    var timer1 = setInterval(function() {
      var dataLen = pieOption.series[0].data.length;
      // 取消之前高亮的图形
      pieChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      currentIndex = (currentIndex + 1) % dataLen;
      // 高亮当前图形
      pieChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
    }, 1000);
    pieChart.setOption(pieOption);


    $(shasha).css({"background":"red","backgroundSize":"100%"})
  </script>
</body>

</html>
